<template>
    <div class="main">
    <el-row>
      <h2>任务标题：<el-input v-model="data.title"></el-input></h2>
    </el-row>
    <el-row>
        <a class="deadline">截止时间：
            <el-date-picker
            v-model="data.deadline"
            type="datetime"
            placeholder="选择日期时间">
            </el-date-picker>
        </a>
    </el-row>
    <el-row>
      <h3>任务描述：</h3>
      <el-input type="textarea" v-model="data.description"></el-input>
    </el-row>
    <el-row class="button-group">
      <el-col :span="4"><el-button type="primary" @click="calculateScore">统计分数</el-button></el-col>
      <el-col :span="4"><el-button type="danger" @click="operateTask(2)">删除任务</el-button></el-col>
      <el-col :span="4"><el-button type="warning" @click="operateTask(3)">修改任务</el-button></el-col>
    </el-row>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="评分详情" name="first">
        <el-row class="table-wrapper">
          <el-table :data="currentdata" stripe>
            <el-table-column prop="name" label="项目名称"></el-table-column>
            <el-table-column prop="student_name" label="学生名称"></el-table-column>
            <el-table-column prop="score" label="得分">
              <template #default="{ row }">
                {{ row.score !== undefined ? row.score : '未评分' }}
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="mutualgrade.length"
            :page-size="size"
            :current-page="currentpage"
            @current-change="handleCurrentChange"
            class="pagination"
          ></el-pagination>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="互评得分" name="second">
        <el-table :data="scores" stripe>
            <el-table-column prop="name" label="项目名称"></el-table-column>
            <el-table-column prop="g_name" label="组名"></el-table-column>
            <el-table-column prop="no_grade" label="未完成评分人数"></el-table-column>
            <el-table-column prop="l_name" label="组长姓名"></el-table-column>
            <el-table-column prop="final_score" label="最终得分"></el-table-column>
          </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
  <el-dialog title="确认操作" width="40%" v-model="showOk">
    <el-button @click="dealTask">确定</el-button>
    <el-button @click="showOk = false">取消</el-button>
  </el-dialog>
</template>


<script setup>
import axios from 'axios';
import { ref, onMounted,computed,onBeforeMount } from 'vue';
import { useRoute } from 'vue-router';
import moment from 'moment';
import { ElMessage } from 'element-plus';
import router from '@/router';

const route = useRoute()
let data = ref({})//上一个页面传过来的数据
let mutualgrade = ref([])//互评情况数据
let scores = ref([])//互评分数数据
let currentdata = ref([])//当前页面数据
let currentpage = ref(1)//当前页数
let totalpage = ref()//总页数
let activeName = ref('first')
const size = 7//每页的数据量
let operatenum = ref(0)
let showOk=ref(false)



onMounted(() => {
    data.value = history.state
    const tid = data.value.id
    axios.get('http://localhost:8080/mutualgrade/getgradetaskbytid', {params: {tid: tid}})
    .then((res) => {
        mutualgrade.value = res.data;
        console.log(mutualgrade.value)
        totalpage.value = Math.ceil(mutualgrade.value.length / size);
        updateCurrentData();
    })
    .catch((err) => {
        console.log(err)
    })
    axios.get('http://localhost:8080/mutualscore/getmutualscore',{params:{tid:tid}})
    .then((res) => {
      scores.value = res.data
      console.log(scores.value)
    })
    .catch((err) => {
        console.log(err)
    })
})

const updateCurrentData = (() => {
    const startIndex = (currentpage.value - 1) * size;
    const endIndex = startIndex + size;
    currentdata.value = mutualgrade.value.slice(startIndex, endIndex);
})

const handleCurrentChange = ((page) => {
    currentpage.value = page;
    updateCurrentData();
})

const operateTask = (num) => {
  showOk.value = true
  operatenum.value = num
}

const dealTask = () =>{
  if(operatenum.value == 2)
    deleteTask()
  else if(operatenum.value == 3)
    updateTask()
  showOk.value = false
}

const calculateScore = () => {
  const tid = data.value.id
  axios.get('http://localhost:8080/mutualscore/calculatemutualscore',{params:{tid:tid}})
  .then((res) => {
    const a = res.data
    if(a)
      location.reload()
  })
  .catch((err)=>{
    
  })
}




const updateTask = () => {
  
  data.value.deadline = moment(data.value.deadline).format('YYYY-MM-DDTHH:mm:ss')
  let newtask = {
    id:data.value.id,
    title:data.value.title,
    tid:data.value.tid,
    description:data.value.description,
    nograde:data.value.nograde,
    num:data.value.num,
    deadline:data.value.deadline
  }
  console.log(newtask)
  axios.post('http://localhost:8080/gradetask/updategradetask',newtask)
  .then((res) => {
    if(res.data){
      ElMessage({
        message:'操作成功',
        type:'success'
      })
      location.reload()
    }
  })
  .catch((err) => {
    console.log(err)
    ElMessage({
      message:'操作失败',
      type:'error'
    })
  })
}


const deleteTask = () => {
  
  const tid = data.value.id
  axios.get('http://localhost:8080/gradetask/deletegradetaskbyid',{params: {id: tid}})
  .then((res) => {
    console.log(res.data)
    if(res.data){
      ElMessage({
        message:'操作成功',
        type:'success'
      })
      setTimeout(() => {
        router.go(-1)
      },1000)  
    }
  })
  .catch((err) => {
    console.log(err)
    ElMessage({
      message:'操作失败',
      type:'error'
    })
  })
}

</script>


<style scoped>
.main {
  padding: 20px;
  background-color: #f9f9f9;
}

.main h2, .main h3 {
  margin: 10px 0;
}

.deadline {
  display: block;
  font-weight: bold;
  margin-bottom: 10px;
}

.button-group {
    margin-top: 10px;
    margin-bottom: 20px;
}

.table-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

el-table {
  width: 100%;
}

.pagination {
  margin-top: 20px;
}

el-row{
    margin-top: 3px;
}
</style>
